<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        #title {
            line-height: 40px;
        }

        .list li {
            line-height: 40px;
            border: 1px dashed #333;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <h3 id="title">DOM操作</h3>
        <ul class="list">
            <li>01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
            <li>06</li>
        </ul>
    </div>
</body>
<script>
    // DOM操作 => 对DOM操作进行封装 => 可以快捷获取元素 操作元素改变内容 样式 属性 绑定事件 


    // 面向过程 => 一般流程下操作元素的步骤
    // 1. 获取元素
    // document.getElementById()
    // document.getElementsByClassName()
    // document.getElementsByTagName()
    // document.getElementsByName()

    // document.querySelector()
    // document.querySelectorAll()

    // 2. 通过获取的元素 操作元素的内容(innerHTML/innerText/value)  样式(ele.style)  属性(属性节点:ele.setAttribute()  元素节点的属性:ele.className) 绑定事件(ele.addEventListener)


    // 获取元素操作元素
    // 单元素 多元素

    // 单元素 => 直接操作
    // var title = document.getElementById("title");
    // title.innerHTML = "111111";

    // 多元素  => 遍历操作
    // var liList = document.querySelectorAll(".list li");
    // for (var i = 0; i < liList.length; i++) {
    //     var li = liList[i];
    //     li.innerHTML = "22222"
    // }

    // 统一操作:   使用 document.querySelectorAll()  => 传入一个css选择器,根据选择获取元素 => 返回一个数组(无论是单元素 还是多元素都会放到数组中)
    // 统一将获取的元素放到数组中 => 遍历操作

    // 根据传入的选择器获取元素 
    // var list = document.querySelectorAll(".list li");
    // console.log(list);

    // 循环操作元素
    // for (var i = 0; i < list.length; i++) {
    //     var ele = list[i];
    //     ele.innerHTML = "11111";
    // }


    // 按功能划分

    // 获取元素
    var list = document.querySelectorAll(".list li");
    console.log(list);

    // 操作元素
    // 改变内容(html)
    function setHtml(con) {
        for (var i = 0; i < list.length; i++) {
            var ele = list[i];
            ele.innerHTML = con;
        }
    }

    function getHtml() {
        // var arr = [];
        // for (var i = 0; i < list.length; i++) {
        //     var ele = list[i];
        //     arr.push(ele.innerHTML);
        // }
        // return arr;

        // 为了模拟封装jquery => 按jquery来  (默认返回集合中的第一个内容) 
        return list[0].innerHTML;
    }









</script>

</html>